<template>
	<view>
		<view class="box-flex-center logo-box">
			<image src="@/static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="box box-card">
			<uni-forms ref="loginForm" :modelValue="loginForm" :rules="formRules" errShowType="toast">
				<uni-forms-item name="phone">
					<uni-easyinput type="number" v-model="loginForm.phone" placeholder="手机号" :clearable="false"
						maxlength="11">
						<template v-slot:right>
							<button class="get-code" @click="getCode" :disabled="showTime">获取验证码
								<span v-if="showTime">({{seconds}})</span>
							</button>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="code">
					<uni-easyinput type="password" v-model="loginForm.code" placeholder="验证码" maxlength="4">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<view class="box-flex-between" style="margin: 10px 0 30px 0; padding: 0 10px;">
						<navigator url="/pages/login/register" open-type="redirect" hover-class="none">用户注册
						</navigator>
						<navigator url="/pages/login/login" open-type="redirect" hover-class="none">账号密码登录</navigator>
						<navigator url="/pages/login/forgetPwd" open-type="redirect" hover-class="none">忘记密码
						</navigator>
					</view>
					<button class="form-button" @click="login">登录</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<cu-agreement :checked="agreementChecked" @change="agreementChange"></cu-agreement>
	</view>
</template>

<script>
	import cuAgreement from '@/components/agreement.vue'
	export default {
		components: {
			cuAgreement
		},
		data() {
			return {
				loginForm: {
					phone: '',
					code: '',
					deviceInfo: ''
				},
				agreementChecked: false,
				showTime: false,
				seconds: 60,
				timer: null,
				formRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							pattern: '^[1][3,4,5,7,8,9][0-9]{9}$',
							errorMessage: '请输入正确的手机号码'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					}
				}
			};
		},
		destroyed() {
			clearInterval(this.timer);
		},
		methods: {
			agreementChange(val) {
				this.agreementChecked = val;
			},
			getCode() {
				this.$refs.loginForm.validateField(['phone']).then(() => {
					if (this.agreementChecked) {

						clearInterval(this.timer)
						this.showTime = true;
						this.seconds = 60;

						this.timer = setInterval(() => {
							this.seconds--;
							if (this.seconds <= 0) {
								this.showTime = false;
								clearInterval(this.timer);
							}
						}, 1000)

						this.$api.post('/appLogin/getSmsCode', {
							phone: this.loginForm.phone
						}).then(res => {
							this.$util.messageTip('短信发送成功');
						})
					} else {
						this.$util.messageTip('请认真阅读隐私政策和用户协议，并勾选同意');
					}
				})
			},
			login() {
				this.$refs.loginForm.validate().then(() => {
					if (this.agreementChecked) {

						let deviceInfo = getApp().globalData.deviceInfo
						this.loginForm.deviceInfo = JSON.stringify(deviceInfo)

						this.$api.post('/appLogin/loginSms', this.loginForm).then(res => {
							this.$util.saveLoginToken(res.data.token);
							uni.reLaunch({
								url: '/pages/my/my'
							})
						})
					} else {
						this.$util.messageTip('请认真阅读隐私政策和用户协议，并勾选同意')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo-box {
		padding: 50px 20px 20px 20px;

		image {
			width: 75px;
			height: 75px;
		}
	}
</style>
